<template>
  <div>
<div class="nav-class">
<div class="nav-list" v-for="item of list" :key="item.id">
  <router-link :to="item.path">
  <b>{{item.title}}</b>
  </router-link>
</div>
</div>
  <div class="right"><router-view/></div>
  </div>
</template>

<script>
export default {
  name: "NavLeft",
  data(){
    return{
    list:[
      {id:'001',title:'新鲜水果' ,path:'/class/fruit'},
      {id:'002',title:'时令蔬菜',path: '/class/vegetable'},
      {id:'003',title:'肉禽视频',path: '/class/meat'},


    ]
    }
  }
}
</script>

<style scoped lang="scss">
.nav-class{
  width: 30%;
  position: fixed;
  top: 60px;
  left: 0;
  background-color: #f7f7f7;
  height: 100%;
  .nav-list{
    display: flex;
    flex-direction: column;
    height: 40px;
    //background-color: orange;
    align-items: center;
    justify-content: space-around;
  }
  .nav-list b{
    color: black;
  }
  .nav-list b select{
    color: red;
  }
}
.right{
  width: 70%;
  float: right;
  margin-top: 60px;
  //overflow-y: auto;
  //flex: 1;
}

</style>